<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡与捕获</title>
    <style>
        .outer {
            padding: 20px;
            background-color: #f0f0f0;
        }
        
        .middle {
            padding: 20px;
            background-color: #ccc;
        }
        
        .inner {
            padding: 20px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
        }
        
        ul {
            border: 2px solid #4CAF50;
            padding: 20px;
            border-radius: 8px;
            background: #f8f8f8;
            max-width: 300px;
            margin: 30px auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        li {
            padding: 12px;
            margin: 8px 0;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            list-style-type: none;
            border-left: 4px solid #4CAF50;
        }
        
        li:hover {
            background: #f0f0f0;
            transform: translateX(5px);
        }
        
        #out {
            padding: 20px;
            background-color: #f0f0f0;
        }
        
        #in {
            padding: 20px;
            background-color: #57af4c;
        }
        
        #div3 {
            height: 50px;
            background-color: antiquewhite;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="outer1" class="outer">
        outer
        <div id="middle1" class="middle">
            middle
            <div id="inner1" class="inner">
                事件冒泡演示
            </div>
        </div>
    </div>

    <div id="outer2" class="outer">
        outer
        <div id="middle2" class="middle">
            middle
            <div id="inner2" class="inner">
                事件捕获演示
            </div>
        </div>
    </div>

    <div>
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>橙子</li>
            <li>葡萄</li>
        </ul>
    </div>

    <div id="out">
        外部
        <div id="in">
            内部
            <p style="text-align: center;color: white;">阻止冒泡演示</p>
        </div>
    </div>

    <div id="div3">
        <a href="https://www.baidu.com/">百度超链接跳转</a>
    </div>


    <script>
        let outer1 = document.getElementById("outer1")
        let middle1 = document.getElementById("middle1")
        let inner1 = document.getElementById("inner1")

        //事件冒泡：事件从目标元素向上冒泡至根节点（由内而外）
        //一般默认为事件冒泡，第三参数false
        outer1.addEventListener("click", () => console.log("outer冒泡触发"))
        middle1.addEventListener("click", () => console.log("middle冒泡触发"), false)
        inner1.addEventListener("click", () => console.log("inner冒泡触发"))


        let outer2 = document.getElementById("outer2")
        let middle2 = document.getElementById("middle2")
        let inner2 = document.getElementById("inner2")

        //事件捕获：事件从DOM根节点向下传播至目标元素（由外而内）
        outer2.addEventListener("click", () => console.log("outer捕获触发"), true)
        middle2.addEventListener("click", () => console.log("middle捕获触发"), true)
        inner2.addEventListener("click", () => console.log("inner捕获触发"), true)

        //利用冒泡打印 ul 子元素
        document.querySelectorAll("ul")[0].addEventListener("click", (e) => {
            //打印li元素
            console.log(e.target.innerText)
                //打印事件监听器的父元素
            console.log(e.currentTarget)

        })

        //阻止冒泡或中断捕获
        let out = document.getElementById("out")
        let ins = document.getElementById("in")

        out.addEventListener("click", () => console.log("外层被冒泡"))
        ins.addEventListener("click", (e) => {
            //阻止了外层冒泡的进行
            e.stopPropagation()
            console.log("内层被冒泡")
        })


        //阻止事件默认行为
        let a = document.getElementsByTagName("a")[0].addEventListener("click", (e) => {
            //阻止超链接跳转
            e.preventDefault()
            console.log("超链接被点击")
        })

        //document补充知识：
        console.log(document.documentElement) //打印 html 元素
        console.log(document.body) //直接打印 body 元素
            //层级：window ---> document ---> html --->head、body --->div等

        /* window.onload 是 JavaScript 中用于在页面完全加载后执行代码的事件处理函数
                其核心功能是确保 DOM 和所有资源（如图片、CSS）加载完成后再执行脚本，避免操作未加载的元素导致错误 
                代码格式：
                Window.onLoad =function(){
                    script运行代码
                }
            */
    </script>
</body>

</html>